import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import { viteMockServe } from './src/plugins/mockPlugin'
import path from 'path' // 需要安装 npm install --save-dev @types/node
// 引入tainwindcss
import tailwindcss from '@tailwindcss/vite'
// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), viteMockServe(), tailwindcss()],

  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      // 可以添加更多别名
      '@components': path.resolve(__dirname, './src/components')
    }
  },

  css: {
    modules: {
      // dashes 和 dashesOnly 区别在于，dashes 会保留原始的类名，而 dashesOnly 会删除原始的类名
      // camelCase 和 camelCaseOnly 区别在于，camelCase 会把非驼峰的命名转为驼峰，并保留之前的类名，而 camelCaseOnly 只会把非驼峰的命名转为驼峰，并删除之前的类名。
      localsConvention: 'camelCase',
      generateScopedName: '[local]_[hash:base64:5]' // 只保留类名和哈希值
      // // 或者
      // generateScopedName: '[hash:base64:8]' // 只使用哈希值
      // // 或者
      // generateScopedName: '[name]_[local]' // 只使用文件名和类名，没有哈希
      // // 或者
      // generateScopedName: '[local]--[hash:base64:4]' // 自定义分隔符
    }
  }
})
